<template>
  <div>
    <el-dialog
      :title="$t('modifyPassword')"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :width="dialogWidth"
    >
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item
              :label="$t('oldPassword')"
              prop="password"
              :error="errorinfo.password"
            >
              <el-input
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
                style="width: 80%;"
              />
            </el-form-item>
            <el-form-item :label="$t('newPassword1')" prop="newpassword1">
              <el-input
                v-model="ruleForm.newpassword1"
                type="password"
                autocomplete="off"
                style="width: 80%;"
              />
            </el-form-item>
            <el-form-item :label="$t('newPassword2')" prop="newpassword2">
              <el-input
                v-model="ruleForm.newpassword2"
                type="password"
                autocomplete="off"
                style="width: 80%;"
              />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPasswordForm('ruleForm')">
          {{ $t('submit') }}</el-button>
        <el-button @click="resetForm('ruleForm')">{{
          $t('reset')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store';
export default {
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('inputOldPassword')));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('inputPassword')));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('newpassword2');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('inputPasswordAgain')));
      } else if (value !== this.ruleForm.newpassword1) {
        callback(new Error(this.$t('inputPasswordInconsistent')));
      } else {
        callback();
      }
    };
    return {
      dialogTableVisible: false,
      username: '',
      dialogWidth: 0,
      ruleForm: {
        password: '',
        newpassword1: '',
        newpassword2: ''
      },
      errorinfo: {
        password: ''
      },
      rules: {
        password: [{ validator: validateOldPass, trigger: 'blur' }],
        newpassword1: [{ validator: validatePass, trigger: 'blur' }],
        newpassword2: [{ validator: validatePass2, trigger: 'blur' }]
      }
    };
  },
  created() {
    this.setDialogWidth()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  methods: {
    initial(username) {
      this.username = username
      this.dialogTableVisible = !this.dialogTableVisible;
    },
    setDialogWidth() {
      var val = document.body.clientWidth
      const def = 800 // 默认宽度
      if (val < def) {
        this.dialogWidth = '90%'
      } else {
        this.dialogWidth = 500 + 'px'
      }
    },
    submitPasswordForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          var passwordInfo = {
            user_name: this.username,
            old_password: this.ruleForm.password,
            new_password: this.ruleForm.newpassword1
          };
          var resp = await store.dispatch(
            'user/updateUserPassword',
            passwordInfo
          );

          if (resp.success) {
            this.$alert(this.$t('passwordResetOK'), this.$t('modifyPassword'), {
              confirmButtonText: this.$t('confirm'),
              type: 'success',
              callback: async() => {
                await store.dispatch('user/logout');
                location.reload()
              }
            });
          } else {
            this.targaMessageBox(this.$t('modifyPassword'), resp.msg)
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style></style>
